<template>
  <div class="tableBody" ref="tableBody">
    <table>
      <div v-for="(item, index) in tableData" :key="index">
        <el-table
          :data="item.list"
          :show-header="index === 0"
          border
          ref="table"
          show-summary
          width="100%"
          :summary-method="getSummaries"
        >
          <el-table-column
            align="center"
            prop="id"
            label="ID"
            width="200px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="姓名"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="amount1"
            label="数值1"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="amount2"
            label="数值2"
            width="200px"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="sum_footer" ref="sum_heji">
        <div class="sum_footer_unit left"></div>
        <div class="sum_footer_unit">本页合计</div>
        <div class="sum_footer_unit">{{ getTotal("amount1") }}</div>
        <div class="sum_footer_unit">{{ getTotal("amount2") }}</div>
      </div>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      initData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: 234,
          amount2: 3.2
        },
        {
          id: '12987123',
          name: '王小虎',
          amount1: 165,
          amount2: 4.43
        },
        {
          id: '12987124',
          name: '王小虎',
          amount1: 324,
          amount2: 1.9
        },
        {
          id: '12987125',
          name: '王小虎',
          amount1: 621,
          amount2: 2.2
        },
        {
          id: '12987126',
          name: '王小龙',
          amount1: 234,
          amount2: 3.2
        },
        {
          id: '12987127',
          name: '王小龙',
          amount1: 165,
          amount2: 4.43
        },
        {
          id: '12987128',
          name: '王小豹',
          amount1: 234,
          amount2: 3.2
        }
      ],
      tableData: []
    }
  },
  methods: {
    // 调节表格合计行宽度
    adjustWidth () {
      this.$nextTick(() => {
        if (this.$refs.sum_heji && this.$refs.table) {
          const width = getComputedStyle(
            this.$refs.table[0].$refs.headerWrapper.querySelector('table')
          ).width
          this.$refs.sum_heji.style = 'width:' + width
          this.$refs.sum_heji.style = 'overflow:' + 'auto'
          Array.from(
            this.$refs.table[0].$refs.headerWrapper.querySelectorAll('col')
          ).forEach((n, i) => {
            if (n.getAttribute('width') !== 0) {
              const childWidth = n.getAttribute('width') - 9
              this.$refs.sum_heji.children[i].style =
                'width:' + childWidth + 'px'
            }
          })
        }
      })
    },
    // 表格小计
    getSummaries (param) {
      console.log('合计属性', param)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // 给第二列添加计算结果：**小计
        if (index === 1) {
          sums[index] = data[0].name + '小计'
        } else if (index > 1) {
          const values = data.map((item) => Number(item[column.property]))
          // 判断数组内元素是否都是数字
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            sums[index] += ''
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 计算表格合计行
    getTotal (name) {
      let sum = 0
      this.initData.forEach((n) => {
        sum += parseFloat(n[name])
      })
      sum = sum.toFixed(2)
      return sum
    }
  },
  mounted () {
    // 监听窗口的变化
    window.onresize = () => {
      return (() => {
        this.adjustWidth()
      })()
    }
    // 将数据转化成我们想要的数据格式
    // tableData: [{
    //   name:'王小虎',
    //   list:[{
    //     id: '12987122',
    //     name: '王小虎',
    //     amount1: 234,
    //     amount2: 3.2,
    //   }, {
    //     id: '12987123',
    //     name: '王小虎',
    //     amount1: 165,
    //     amount2: 4.43,
    //     amount3: 12
    //   }, {
    //     id: '12987124',
    //     name: '王小虎',
    //     amount1: 324,
    //     amount2: 1.9,
    //   }, {
    //     id: '12987125',
    //     name: '王小虎',
    //     amount1: 621,
    //     amount2: 2.2,
    //   }]
    // },{
    //   name:'王小龙',
    //   list:[{
    //     id: '12987126',
    //     name: '王小龙',
    //     amount1: 234,
    //     amount2: 3.2,
    //   }, {
    //     id: '12987127',
    //     name: '王小龙',
    //     amount1: 165,
    //     amount2: 4.43,
    //   }]
    // },{
    //   name:'王小豹',
    //   list:[{
    //     id: '12987128',
    //     name: '王小豹',
    //     amount1: 234,
    //     amount2: 3.2,
    //   }]
    // }]
    // 数据按姓名字段分层
    this.initData.forEach((item1) => {
      if (this.tableData.length === 0) {
        this.tableData.push({ name: item1.name, list: [item1] })
      } else {
        const res = this.tableData.some((item) => {
          // 判断相同姓名，有就添加到当前项
          if (item.name === item1.name) {
            item.list.push(item1)
            return true
          }
          return null
        })
        if (!res) {
          // 如果没找相同姓名就添加一个新对象
          this.tableData.push({ name: item1.name, list: [item1] })
        }
      }
    })
    this.adjustWidth()
    // setTimeout(()=>{
    // this.adjustWidth()
    // },200)
    console.log(this.tableData)
  }
}
</script>
<style scoped>
  .tableBody{
        /* 让表格字段过多时也只存在一个横向滚动条 */
          display:flex;
          flex-wrap:wrap;
          align-content:flex-start;
          overflow:auto;
  }
  .sum_footer {
          display: flex;
          display: -webkit-flex;
          height: 40px;
          overflow: visible!important;
  }
  .sum_footer_unit {
          flex-shrink:0;
          font-size: 13px;
          font-weight: 800;
          color: #606266;
          padding: 0 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          word-break:break-word;
          border-bottom: 1px solid #ebeef5;
          border-right: 1px solid #ebeef5;
          border-top: 1px solid #ebeef5;
          text-align: center;
  }
  .left {
          border-left: 1px solid #ebeef5;
  }
</style>
